<template>
  <div>
    <el-empty
      v-if="likeList.length == 0"
      description="你没有评论被点赞过"
    ></el-empty>
    <el-row
      v-for="like in likeList"
      :key="like.articleId + like.author"
      style="margin-top: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1)"
    >
      <el-col :span="2" class="msg-avartar">
        <img :src="like.avatarUrl" />
      </el-col>
      <el-col :span="20" class="msg-info">
        <div class="clearfix">
          <a class="fl" href="#">{{ like.author }}</a>
          <img
            v-if="like.authorIdentity"
            class="fl"
            src="@/assets/认证.png"
            style="width: 15px; margin: 2px 0 2px -5px"
            alt=""
          />
          点赞了你的评论
        </div>
        <div>{{ like.context }}</div>
      </el-col>
      <el-col :span="2" class="msg-supplement">
        <div><i class="el-icon-delete"></i></div>
        <div>2023-1-31</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userMessageApi from "@/api/userMessageApi";
export default {
  data() {
    return {
      likeList: [
        {
          articleId: null,
          author: "gy",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/gy-avartar.jpg",
          postTime: "2023-02-23 04:45:39",
          title: null,
          summary: null,
          goodCount: null,
        },
      ],
    };
  },

  components: {},

  computed: {},

  created() {
    this.getCommentLikeMessage();
  },

  methods: {
    getCommentLikeMessage() {
      userMessageApi.getCommentLikeMessage().then((response) => {
        this.likeList = response.data;
      });
    },
  },
};
</script>
<style scoped>
.msg-avartar img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin: auto;
}
.msg-info {
  margin-bottom: 15px;
}
.msg-info div:nth-child(1) {
  color: #99a;
  margin-bottom: 10px;
}
.msg-info div:nth-child(1) a {
  margin-right: 10px;
}
.msg-info div:nth-child(2) {
  font-size: 100%;
}
.msg-supplement div:nth-child(1) {
  color: #99a;
  margin-bottom: 10px;
}
.msg-supplement div:nth-child(2) {
  color: #99a;
}
</style>
